<template>
    <div class="module-name">
        <!-- 快捷搜索 -->
        <el-tabs v-model="tabIndex" :style="{ height: tabbars.length > 0 ? '56px' : '30px' }" @tab-click="clickTabs">
            <el-tab-pane
                v-for="(tab, tabI) in tabbars"
                :key="tabI"
                :label="tab.name + (tab.num ? `(${tab.num})` : '')"
            />
        </el-tabs>

        <avue-crud
            v-model="dialogForm"
            :table-loading="loading"
            :data="data"
            :option="option"
            :page="page"
            :search="searchForm"
            @update:page="page = $event"
            @on-load="onLoad"
            @search-change="handleSearchChange"
            @update:search="searchForm = $event"
        >
            <!-- 自定义菜单-->
            <template #menuRight="scope">
                <sc-pop-button title="点击确认同步数据" type="primary" size="small">同步</sc-pop-button>
                <el-button type="warning" size="small">数据源</el-button>
            </template>

            <!--row插槽-->
            <template #status="{ row }">
                <el-tag>{{ row.status === 1 ? "正常" : "不正常" }}</el-tag>
            </template>

            <template #cover="{ row }">
                <div class="media">
                    <img :src="row.cover" style="width: 50px; border-radius: 3px" />
                </div>
            </template>

            <!--自定义操作栏-->
            <template #menu="{ type, size }">
                <el-button type="text" size="small">业务功能</el-button>
                <el-button type="text" size="small">学校设备</el-button>
                <el-button
                    type="text"
                    size="small"
                    @click="router.push({ path: '/school_config/school_list/data_sync' })"
                    >数据同步
                </el-button>
            </template>

            <!--自定义表单-->
            <template #coverForm="{ value, type, disabled }">
                <sc-upload v-if="type === 'edit'" :echoFileList="echoFileList" @on-change="selectUploadImg" />
                <sc-upload v-else-if="type === 'add'" @on-change="selectUploadImg" />
                <img v-else style="width: 200px" :src="value" @click="$imgView(value)" />
            </template>

            <template #statusForm="{ value, type, disabled }">
                <el-tag>{{ value === 1 ? "正常" : "不正常" }}</el-tag>
            </template>
        </avue-crud>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { usePage } from "src/hooks/usePage";

const { onLoad, getData, page, loading, searchForm, data } = usePage({});
import avueSetting from "src/config/avueSetting";

const router = useRouter();
const { proxy } = getCurrentInstance();

// 定义响应式数据
const tabIndex = ref(0);
const tabbars = ref([
    // {name: "全部", status: '', num: 1000},
    // {name: "启用", status: 1, num: 500},
    // {name: "停用", status: 0, num: 500}
]);

const searchForm = ref({});
const urls = reactive({
    0: "schoolConfig",
    1: "classCircleList",
    2: "handleDelete"
});

const data = ref([]);
const dialogForm = ref({});
const echoFileList = ref([
    { name: "food.jpeg", url: "https://img0.baidu.com/it/u=2130615794,142753515&fm=26&fmt=auto" }
]);

// 从 mixin 中提取的数据
const loading = ref(false);
const page = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0
});

// 配置选项
const option = computed(() => ({
    ...avueSetting.curd,
    addBtn: false,
    viewBtn: false,
    delBtn: false,
    editBtn: false,
    column: [
        {
            label: "地址",
            prop: "location",
            search: true,
            rules: [
                {
                    required: true,
                    message: "请输入地址",
                    trigger: "blur"
                }
            ]
        },
        {
            label: "联系人",
            prop: "people"
        },
        {
            label: "联系方式",
            prop: "phone"
        },
        {
            label: "封面图",
            prop: "cover",
            span: 24,
            formslot: true,
            labelslot: true,
            errorslot: true
        },
        {
            label: "状态",
            prop: "status",
            slot: true,
            editDisplay: false,
            addDisplay: false
        }
    ]
}));

// 方法定义
/**
 * 获取数据完成回调
 * @param resData 接口返回的data
 */
const dataCallBack = async resData => {
    let tempData = [];
    for (let j = 0; j < page.value.pageSize; j++) {
        tempData.push({
            id: j,
            schoolName: "望夏雨",
            location: "北京市",
            people: "撒打算",
            phone: "13522322233",
            cover: "https://img2.baidu.com/it/u=1451639315,168990875&fm=26&fmt=auto",
            status: 1
        });
    }
    data.value = tempData;
};

// 选择图片触发
const selectUploadImg = files => {
    console.log("files :>> ", files);
};

// 点击导航栏目
const clickTabs = () => {
    searchForm.value.status = tabbars.value[+tabIndex.value].status;
    searchForm.value.page = 1;
    page.value.currentPage = 1;
    getData(searchForm.value);
    console.log("searchForm", searchForm.value);
};

// 从 mixin 中提取的方法 (需要根据实际 mixin 实现调整)
const onLoad = (pageData, params) => {
    // 实现加载逻辑
    console.log("onLoad", pageData, params);
};

const handleSearchChange = (params, done) => {
    // 实现搜索逻辑
    console.log("handleSearchChange", params);
    if (done) done();
};

const getData = params => {
    // 实现获取数据逻辑
    loading.value = true;
    // 模拟异步请求
    setTimeout(() => {
        dataCallBack(null);
        loading.value = false;
    }, 500);
};

// 组件挂载时初始化
// onMounted(() => {
//     getData(searchForm.value);
// });
</script>

<style lang="scss" scoped>
.module-name {
}
</style>
